<template lang="html">
  <section class="components-index_counter" v-if="counterData">
    <div class="index_counter-main">
      <aside class="main-info">
        <p>from</p>
        <p class="course">the courseName</p>
        <p>starting</p>
      </aside>
      <ul class="main-counter">
        <li :class="`ic-${counterData.hours}`"></li>

        <li class="ic-colon"></li>

        <li :class="`ic-${counterData.mins.slice(0,1)}`"></li>
        <li :class="`ic-${counterData.mins.slice(1)}`"></li>

        <li class="ic-colon"></li>

        <li :class="`ic-${counterData.secs.slice(0,1)}`"></li>
        <li :class="`ic-${counterData.secs.slice(1)}`"></li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  props:{
    counterData:{
      type: Object,
      require: true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../css/config";
$info-width: 225px;
$counter-height: 190px;
.components-index_counter{
  width: 100%;
  height: $counter-height;
  box-sizing: border-box;
  padding: 15px 25px;
  background-color: #000;
  .index_counter-main{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    border: 3px solid #ff4c3b;
    box-sizing: border-box;
    padding-left: $info-width;
    .main-info{
      position: absolute;
      top: 0;
      left: 0;
      width: $info-width;
      height: 100%;
      box-sizing: border-box;
      padding: 10px 0 10px 42px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      p{
        display: block;
        width: 100%;
        font-size: 25px;
        color: #fff;
        @include text-overflow;
      }
      .course{
        color: $common-red;
      }
    }
    .main-counter{
      display: block;
      width: 100%;
      height: 100%;
      white-space: nowrap;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .ic-colon{
        margin-top: 40px;
        font-size: 65px;
      }
      .ic-1{
        margin-left: 40px;
      }
      li{
        display: inline-block;
        vertical-align: middle;
        font-size: 112px;
        color: $common-red;
        padding: 0 7px;
      }
    }
  }
}
</style>
